<template>
  <div id="box">
      <van-tabs 
      v-model="activeName"
      title-active-color="#f56"
      line-width="80px"
      line-height="2px"
      >
        <div v-for="(item,index) in list" :key="index">
          <van-tab :title="item.title" :name="item.name">
            <router-view></router-view>
          </van-tab>
        </div>
      </van-tabs>
      <div class="content-box">
        <div class="content-item">
          <div class="content-title">小影家LIVE</div>
          <div class="content-tx">
            <img src="https://s11.mogucdn.com/mlcdn/c45406/191009_68317afe4agegj4l1kgii0ckjge0i_400x400.jpg_100x100.jpg" alt="">
          </div>
          <div class="content">
            <img src="https://s5.mogucdn.com/mlcdn/c45406/180928_60g224blbf353hg21cb7gih1bb6c3_750x427.jpg_750x500.jpg" alt="" class="content-img">
            <div class="content-bottom">
              <div>直播中</div>
              <div>来了来了夏款清仓喽</div>
              <div class="content-bottom-float">
                <div>
                  <div>
                    <img src="https://s5.mogucdn.com/mlcdn/c45406/210601_82f2hk1k46j7f7910el1cehb4ak81_750x1000.jpg_100x100.jpg" alt="" class="content-img2">
                    <span>￥19.99</span>
                  </div>
                </div>
                <div>
                  <ul>
                    我的
                    <!-- <li>
                      <img src="https://s5.mogucdn.com/b7/avatar/1607075jsl4_ifrwgntcgjtgeyrzhezdambqhayde_1080x1080.jpg_100x100.jpg" alt="">
                      <span>再看下刚才的裤子好吗</span>
                    </li>
                    <li>
                      <img src="https://s5.mogucdn.com/b7/avatar/1607075jsl4_ifrwgntcgjtgeyrzhezdambqhayde_1080x1080.jpg_100x100.jpg" alt="">
                      <span>再看下刚才的裤子好吗</span>
                    </li>
                    <li>
                      <img src="https://s5.mogucdn.com/b7/avatar/1607075jsl4_ifrwgntcgjtgeyrzhezdambqhayde_1080x1080.jpg_100x100.jpg" alt="">
                      <span>再看下刚才的裤子好吗</span>
                    </li> -->
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'a',
      list:[
        {
          title: '热门',
          name: 'a'
        },
        {
          title: '穿搭',
          name: 'b'
        },
        {
          title: '美妆',
          name: 'c'
        },
      ]
    };
  },
}
</script>

<style lang="stylus" coped>

#box
  width 100%
  height 100%
.van-tabs
  border-bottom 1px solid #ebebeb

.content-box
  padding 10px
  width 100%
  box-sizing border-box
  .content-item
    position relative
    .content-title
      padding-left 70px
      height 27px
      line-height 27px
    .content-tx
      width 47px
      height 47px
      position absolute
      top 3px 
      left 14px
      z-index 999
      img
        width 100%
        border-radius 50%
    .content
      position relative
      .content-img
        width 100%
      .content-bottom
        box-sizing border-box
        padding 20px
        width 355px
        height 158px
        margin-top 60px
        position absolute
        top 0
        left 0
        color #fff
.content-bottom-float
  width 100%
  float left
  color #fff
  padding 10px
  position: relative;
.content-img2
  width 60px
  height 60px
</style>